<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:tiles="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org" lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Taxis</title>

		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="description" content="" />
		<meta name="author" content="" />

		<!-- basic styles -->

		<script src="../../static/jquery/jquery.min.js" th:src="@{/static/jquery/jquery-2.0.3.min.js}"></script>
		<link href="../../static/bootstrap/css/bootstrap.min.css" th:href="@{/static/bootstrap/css/bootstrap.min.css}" rel="stylesheet" />
		<script src="../../static/bootstrap/js/bootstrap.min.js" th:src="@{/static/bootstrap/js/bootstrap.min.js}"></script>
		<link href="../../static/font-awesome/css/font-awesome.min.css" th:href="@{/static/font-awesome/css/font-awesome.min.css}" rel="stylesheet" />			

		<link href="../../static/jquery/jquery-ui.css" th:href="@{/static/jquery/jquery-ui.css}" rel="stylesheet" />
		<script src="../../static/jquery/jquery-ui.js" th:src="@{/static/jquery/jquery-ui.js}"></script>
		<link href="../../static/custom/dataTables.bootstrap.css" th:href="@{/static/custom/dataTables.bootstrap.css}" rel="stylesheet" />
	
		<!-- fonts -->

		<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" th:href="@{'http://fonts.googleapis.com/css?family=Open+Sans:400,300'}" rel="stylesheet" />		
		
		<!-- ace styles -->

		<link href="../../static/custom/ace.min.css" th:href="@{/static/custom/ace.min.css}" rel="stylesheet" />
		<link href="../../static/custom/ace-rtl.min.css" th:href="@{/static/custom/ace-rtl.min.css}" rel="stylesheet" />
		<link href="../../static/custom/ace-skins.min.css" th:href="@{/static/custom/ace-skins.min.css}" rel="stylesheet" />

		<!--[if lte IE 8]>
		  <link href="../../static/custom/ace.min.css" th:href="@{/static/custom/ace-ie.min.css}" rel="stylesheet" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->

		<script src="../../static/custom/ace-extra.min.js" th:src="@{/static/custom/ace-extra.min.js}"></script>

		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

		<!--[if lt IE 9]>
		<script src="../../static/custom/html5shiv.js" th:src="@{/static/custom/html5shiv.js}"></script>
		<script src="../../static/custom/respond.min.js" th:src="@{/static/custom/respond.min.js}"></script>
		<![endif]-->
		
	</head>

	<body tiles:fragment="content">	
	<link href="../../static/datepicker/datepicker.css" th:href="@{/static/datepicker/datepicker.css}" rel="stylesheet" />	
	
			<div class="breadcrumbs" id="breadcrumbs">
				<script type="text/javascript">
					try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
				</script>
				<ul class="breadcrumb">
					<li>
						<i class="fa fa-home home-icon"></i>								
						<a href='/' th:href="@{/}">Inicio</a>
					</li>
					<li>
						<a href="/serviciosRecientes" th:href="@{/serviciosRecientes}">Reserva de Servicios</a>
					</li>
					<li class="active">Historial de Servicios</li>
				</ul><!-- .breadcrumb -->
			</div>
			<div class="page-content">
				<div class="page-header">
					<h1>
						Historial de Servicios
						<small>
							<i class="fa fa-angle-double-right"></i>
							Servicios terminados y cancelados
						</small>
					</h1>
				</div><!-- /.page-header -->
				<div class="row">
					<div class="col-xs-12">	
						<div id="accordion" class="accordion-style1 panel-group col-sm-11">
							<div class="panel panel-default">
								<div class="panel-heading">
									<h4 class="panel-title">
										<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
											<i class="bigger-110 icon-angle-right" data-icon-hide="icon-angle-down" data-icon-show="icon-angle-right"></i>
											&nbsp;Filtros de b&uacute;squeda
										</a>
									</h4>
								</div>

								<div class="panel-collapse collapse" th:classappend="${filtrado} ? 'in'" id="collapseOne" >
									<form action="#" th:action="@{/historialServicios}" th:object="${filtroHistorial}" method="post">
										<div class="panel-body">
											<div class="row">
												<div class="col-xs-4">
													<div class="col-xs-12">
														<div class="col-xs-5">
															<label for="fChkFecha" class="small">Fecha de servicio:</label>
															<label class="middle small">
																<input class="ace" type="checkbox" id="fChkFecha" th:field="*{chkFechas}"/>
																<span class="lbl"> Filtrar fechas</span>
															</label>
														</div>										
														
														<div id="fecha-container" class="col-xs-7">	
															<div class="input-daterange input-group row" id="datepicker">
																<div class="col-xs-6">
																	<label for="fFechaDesde" class="small">Desde:</label>
																	<input type="text" id="fFechaDesde" class="form-control hasDatepicker ultra-small" name="start" th:field="*{filtroFechaDesde}" th:disabled="${!filtroHistorial.chkFechas}"/>
																</div>
																<div class="col-xs-6">
																	<label for="fFechaHasta" class="small">Hasta:</label>
																	<input type="text" id="fFechaHasta" class="form-control hasDatepicker ultra-small" name="end" th:field="*{filtroFechaHasta}" th:disabled="${!filtroHistorial.chkFechas}"/>
																</div>
															</div>
														</div>
													</div>											
												</div>
												<div class="col-xs-4">
													<div class="col-xs-11">
														<div class="col-xs-6">
															<label for="fChkCentroCosto" class="small">Centro de costo:</label>
															<label class="middle small">
																<input class="ace" type="checkbox" id="fChkCentroCosto" th:field="*{chkCentroCosto}"/>
																<span class="lbl"> Filtrar centro costo</span>
															</label>
														</div>
														<div class="col-xs-6">
															<label for="fCentroCosto" class="small">Centro de costo</label>
															<input type="text" id="fCentroCosto" class="form-control ultra-small" th:field="*{filtroCentroCosto}" th:disabled="${!filtroHistorial.chkCentroCosto}"/>
														</div>
													</div>
												</div>
												<div class="col-xs-4">
													<div class="col-xs-11">
														<div class="col-xs-6">
															<label for="fChkFechaPago" class="small" >Fecha de pago empresa:</label>
															<label class="middle small">
																<input class="ace" type="checkbox" id="fChkFechaPago" th:field="*{chkFechaPago}"/>
																<span class="lbl"> Filtrar fechas de pago</span>
															</label>
														</div>
														<div class="col-xs-6">
															<label for="fFechaPago" class="small">Fecha:</label>
															<input type="text" id="fFechaPago" class="form-control hasDatepicker ultra-small" th:field="*{filtroFechaPago}" th:disabled="${!filtroHistorial.chkFechaPago}"/>
														</div>
													</div>
												</div>
											</div>
											<hr/>
											<div class="row">
												<div class="col-xs-4">
													<div class="col-xs-12">
														<div class="col-xs-4">
															<label for="fChkHora" class="small">Hora:</label>
															<label class="middle small">
																<input class="ace" type="checkbox" id="fChkHora" th:field="*{chkHoras}"/>
																<span class="lbl"> Filtrar horas</span>
															</label>
														</div>
														<div class="col-xs-3 col-xs-offset-1">
															<label for="fHoraDesde" class="small">Desde:</label>
															<input type="text" id="fHoraDesde" class="form-control ultra-small input-mask-hora" th:field="*{filtroHoraDesde}" th:disabled="${!filtroHistorial.chkHoras}"/>
														</div>
														<div class="col-xs-3">
															<label for="fHoraHasta" class="small">Hasta:</label>
															<input type="text" id="fHoraHasta" class="form-control ultra-small input-mask-hora" th:field="*{filtroHoraHasta}" th:disabled="${!filtroHistorial.chkHoras}"/>
														</div>
													</div>											
												</div>
												<div class="col-xs-4">
													<div class="col-xs-11">
														<div class="col-xs-5">
															<label for="fChkPasajero" class="small">Pasajero:</label>
															<label class="middle small">
																<input class="ace" type="checkbox" id="fChkPasajero" th:field="*{chkPasajero}"/>
																<span class="lbl"> Filtrar pasajero</span>
															</label>
														</div>
														<div class="col-xs-6 col-xs-offset-1">
															<label for="fPasajero" class="small">Nombre o documento</label>
															<input type="text" id="fPasajero" class="form-control ultra-small" th:field="*{filtroPasajero}" th:disabled="${!filtroHistorial.chkPasajero}"/>
														</div>
													</div>
												</div>
												<div class="col-xs-4">
													<div class="col-xs-11">
														<label class="middle small col-xs-12">
															<input class="ace" type="checkbox" id="fChkCredito" th:field="*{chkPagosCredito}"/>
															<span class="lbl"> Filtrar solo pagos al cr&eacute;dito</span>
														</label>
														<label class="middle small col-xs-12">
															<input class="ace" type="checkbox" id="fChkContado" th:field="*{chkPagosContado}"/>
															<span class="lbl"> Filtrar solo pagos al contado</span>
														</label>
													</div>
												</div>
											</div>
											<hr/>
											<div class="row">
												<div class="col-xs-4">
													<div class="col-xs-11">
														<div class="col-xs-6">
															<label for="fChkSolicitante" class="small">Solicitante:</label>
															<label class="middle small">
																<input class="ace" type="checkbox" id="fChkSolicitante" th:field="*{chkSolicitante}"/>
																<span class="lbl"> Filtrar solicitante</span>
															</label>
														</div>
														<div class="col-xs-6">
															<label for="fSolicitante" class="small">Nombre o documento</label>
															<input type="text" id="fSolicitante" class="form-control ultra-small" th:field="*{filtroSolicitante}" th:disabled="${!filtroHistorial.chkSolicitante}"/>
														</div>
													</div>											
												</div>
												<div class="col-xs-4">
													<div class="col-xs-11">
														<div class="col-xs-6">
															<label for="fChkFechaCierre" class="small">Fecha de cierre empresa:</label>
															<label class="middle small">
																<input class="ace" type="checkbox" id="fChkFechaCierre" th:field="*{chkFechaCierre}"/>
																<span class="lbl"> Filtrar fechas de cierre</span>
															</label>
														</div>
														<div class="col-xs-6">
															<label for="fFechaCierre" class="small">Fecha:</label>
															<input type="text" id="fFechaCierre" class="form-control hasDatepicker ultra-small" th:field="*{filtroFechaCierre}" th:disabled="${!filtroHistorial.chkFechaCierre}"/>
														</div>
													</div>
												</div>
												<div class="col-xs-4">
													<div class="col-xs-11">
														<button type="submit" class="btn btn-primary btn-block">Filtrar</button>
													</div>
												</div>
											</div>
										</div>
									</form>
								</div>
							</div>
							<div class="space"></div>								
						</div>
							
						<div class="col-sm-11">		
							<div class="btn-group col-sm-7">
									<button class="btn btn-light" id="btnDetalleOrden">Detalle</button>
									<button class="btn btn-light" id="btnEvaluarOrden">Evaluar</button>
									<button class="btn btn-light" id="btnImprimirHistorial">Imprimir</button>
									<button class="btn btn-light" id="btnExportarHistorialExcel">Exportar</button>
									<a href='/serviciosRecientes' th:href="@{/serviciosRecientes}" class="btn btn-light">Volver</a>
							</div>
							<div class="col-sm-4">
								<div class="input-group">
									<span class="input-group-btn">
										<button id="botonBuscar" data-toggle="dropdown" class="btn btn-purple btn-sm dropdown-toggle">
											Todos
											<span class="fa fa-search icon-on-right bigger-110"></span>
										</button>

										<ul class="dropdown-menu dropdown-purple">
											<li>
												<a href="#" id="BTodos">Todos</a>
											</li>

											<li>
												<a href="#" id="BTipoServicio">Por tipo de servicio</a>
											</li>
											
											<li>
												<a href="#" id="BTipoVehiculo">Por tipo de veh&iacute;culo</a>
											</li>
											
											<li>
												<a href="#" id="BCodConductor">Por c&oacute;digo conductor</a>
											</li>
											
											<li>
												<a href="#" id="BCodVehiculo">Por c&oacute;digo veh&iacute;culo</a>
											</li>
											
											<li>
												<a href="#" id="BNumero">Por n&uacute;mero de reserva</a>
											</li>
										</ul>
									</span>
									<input id="inputBuscar" type="text" class="form-control search-query input-small"/>
								</div>									
							</div>
							<div class="col-sm-1">
								<div class="btn-group">
									<button id="botonLimpiar" class="btn btn-light">Limpiar</button>
								</div>
							</div>
						</div>
						<div class="col-sm-11">	
							<div class="space"></div>
							<div class="table-responsive">							
								<table id="tabla-servicios" class="table table-bordered table-hover table-condensed">
									<thead>
										<tr>
											<th></th>
											<th>
											<i class="fa fa-clock-o bigger-110 hidden-480"></i>
											Fecha
											</th>											
											<th>Hora</th>
											<th>Centro Costo</th>
											<th>Solicitante</th>
											<th>Pasajero</th>
											<th>Tipo Servicio</th>
											<th>Tipo Vehiculo</th>
											<th>Origen</th>
											<th>Destino</th>
											<th>V&iacute;a</th>
											<th>Estado</th>
											<th>Conductor</th>
											<th>Reserva</th>
											<th>Contado</th>
											<th>Credito</th>
											<th>Fecha Cierre</th>
											<th>Fecha Pago</th>
											<th>C&oacute;digo conductor</th>
											<th>C&oacute;digo veh&iacute;culo</th>											
										</tr>
									</thead>
									<tbody>
										<tr th:each="ordenServicio : ${ordenesServicio}">
											<td class="center">
												<label>
													<input type="checkbox" name="chkOrdenes" class="ace" th:value="${ordenServicio.numReserva}"/>
													<span class="lbl"></span>
												</label>
											</td>
											<td th:text="${#dates.format(ordenServicio.fechaServicio, #messages.msg('date.formatFecha'))}">30/12/2013</td>
											<td th:text="${#dates.format(ordenServicio.fechaServicio, #messages.msg('date.formatHora'))}">14:30</td>
											<td th:text="${ordenServicio.centroCosto.nombre}">Log&iacute;stica</td>
											<td th:text="${ordenServicio.solicitante.login}">ASFD</td>
											<td th:text="${ordenServicio.pasajero.nombreCompleto}">William Chacon Arana</td>
											<td th:text="${ordenServicio.tipoServicio}">Punto a pto.</td>
											<td th:text="${ordenServicio.tipoVehiculo}">Sedan</td>
											<td th:utext="${ordenServicio.puntoOrigen.zona.nombre} + '&lt;br/&gt;' + ${ordenServicio.puntoOrigen.direccion}">Magdalena 1 <br/> Av. Sucre 873</td>
											<td th:utext="${ordenServicio.destinoUltimo.puntoDestino.zona.nombre} + '&lt;br/&gt;' + ${ordenServicio.destinoUltimo.puntoDestino.direccion}">Comas 1 <br/> Calle Beta Mz. M</td>
											<td th:text="${ordenServicio.medioReserva}">Web</td>
											<td th:text="${ordenServicio.estado}">Completado</td>											
											<td th:text="${ordenServicio.unidadMovil != null} ? ${ordenServicio.unidadMovil.conductor.nombreCompleto} : 'No asignado'">Julio Alcantara Ortiz</td>
											<td th:text="${ordenServicio.numReserva}">1243</td>
											<td th:text="${ordenServicio.tipoPago == 'Contado'} ? ${ordenServicio.totalServicio} : ''">0.0</td>
											<td th:text="${ordenServicio.tipoPago == 'Credito'} ? ${ordenServicio.totalServicio} : ''">0.0</td>
											<td th:text="${ordenServicio.estadoCuentaEmpresa} ? ${ordenServicio.estadoCuentaEmpresa.fechaCierre}">10/10/10</td>
											<td th:text="${ordenServicio.fechaPago}">10/10/10</td>
											<td th:text="${ordenServicio.unidadMovil != null} ? ${ordenServicio.unidadMovil.conductor.codConductor} : 'No asignado'">Julio Alcantara Ortiz</td>
											<td th:text="${ordenServicio.unidadMovil != null} ? ${ordenServicio.unidadMovil.vehiculo.codVehiculo} : 'No asignado'">Julio Alcantara Ortiz</td>						
										</tr>										
										<tr th:if="${ordenesServicio.isEmpty()}">
											<td colspan="20">No se encontraron servicios recientes</td>
										</tr>
									</tbody>
								</table>
							</div>						
						</div>
						<div class="col-sm-11">
							<div class="space"></div>
							<div class="col-sm-8 well well-sm">	
								<div class="space"></div>								
								<div class="col-xs-4">
									<div class="col-xs-6">
										Total servicios:
									</div>
									<div class="col-xs-6">
										<p class="text-primary" th:text="${totalServicios}">1242143</p>
									</div>
								</div>
								<div class="col-xs-6">
									<div class="col-xs-6">
										Total servicios al contado:
									</div>
									<div class="col-xs-6">
										<p class="text-primary col-xs-1">S/.</p>
										<p class="text-primary col-xs-5" th:text="${totalContado}">1242143</p>
									</div>
									<div class="col-xs-6">
										Total servicios al cr&eacute;dito:
									</div>
									<div class="col-xs-6">
										<p class="text-primary col-xs-1">S/.</p>
										<p class="text-primary col-xs-5" th:text="${totalCredito}">1242143</p>
									</div>
									<div class="col-xs-6">
										<strong>TOTAL</strong>
									</div>
									<div class="col-xs-6">
										<p class="text-primary col-xs-1">S/.</p>
										<strong><p class="text-primary col-xs-5" th:text="${totalContado + totalCredito}">1242143</p></strong>
									</div>
								</div>					
							</div>
						</div>
						<form action="#" th:action="@{/downloadHistorial}" target="_blank" th:object="${filtroHistorial}" method="post" id="dowloadHistorial">
							<input type="hidden" th:field="*{chkFechas}"/>
							<input type="hidden" th:field="*{filtroFechaDesde}"/>
							<input type="hidden" th:field="*{filtroFechaHasta}"/>
							<input type="hidden" th:field="*{chkCentroCosto}"/>
							<input type="hidden" th:field="*{filtroCentroCosto}"/>
							<input type="hidden" th:field="*{chkFechaPago}"/>
							<input type="hidden" th:field="*{chkHoras}"/>
							<input type="hidden" th:field="*{filtroHoraDesde}"/>
							<input type="hidden" th:field="*{filtroHoraHasta}" />
							<input type="hidden" th:field="*{chkPasajero}"/>
							<input type="hidden" th:field="*{filtroPasajero}" />
							<input type="hidden" th:field="*{chkPagosCredito}"/>
							<input type="hidden" th:field="*{chkPagosContado}"/>
							<input type="hidden" th:field="*{chkSolicitante}"/>
							<input type="hidden" th:field="*{filtroSolicitante}"/>
							<input type="hidden" th:field="*{chkFechaCierre}"/>
							<input type="hidden" th:field="*{filtroFechaCierre}" />
							<input type="hidden" name="type" value="" id="tipoDownload"/>
						</form>
					</div>	
				</div>					
			</div><!-- /.page-content -->
		
		<script src="../../static/custom/jquery.dataTables.min.js" th:src="@{/static/custom/jquery.dataTables.min.js}"></script>
		<script src="../../static/custom/jquery.dataTables.bootstrap.js" th:src="@{/static/custom/jquery.dataTables.bootstrap.js}"></script>
		<script src="../../static/custom/jquery.maskedinput.min.js" th:src="@{/static/custom/jquery.maskedinput.min.js}"></script>
		<script src="../../static/datepicker/bootstrap-datepicker.js" th:src="@{/static/datepicker/bootstrap-datepicker.js}"></script>
		<script src="../../static/datepicker/bootstrap-datepicker.es.js" th:src="@{/static/datepicker/bootstrap-datepicker.es.js}"></script>
		
		<style type="text/css">
				.dataTables_filter {display: none;}
				.ultra-small {
				   height: 20px !important;
				   font-size: 18px;
				   line-height: 10px;
  				   padding: 10px 18px;
				}
		</style>
		
		<script type="text/javascript">
		// <![CDATA[

 		    //Fix para checkbox ace
		    $(function(){
  				$('input[type=checkbox],input[type=radio]').after('<span class="lbl" />');
			});
		            
		    var oTable;
		    
		    jQuery.extend( jQuery.fn.dataTableExt.oSort, {
				"date-uk-pre": function ( a ) {
				    var ukDatea = a.split('-');
				    return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
				},
				
				"date-uk-asc": function ( a, b ) {
				    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
				},
				
				"date-uk-desc": function ( a, b ) {
				    return ((a < b) ? 1 : ((a > b) ? -1 : 0));
				}
			} );
		            
			jQuery(function($) {
				
				$.mask.definitions['h'] = "[f0-2]";
				$.mask.definitions['m'] = "[f0-5]";
				$(".input-mask-hora").mask("h9:m9", {placeholder:"0"});
				
				$('#fecha-container .input-daterange').datepicker({
				    autoclose: true,
				    format: "dd/mm/yyyy",
				    todayBtn: true,
				    language: "es",
				    multidate: false,
				    todayHighlight: true
				});
				
				$('#fFechaPago').datepicker({
				    autoclose: true,
				    format: "dd/mm/yyyy",
				    todayBtn: true,
				    language: "es",
				    multidate: false,
				    todayHighlight: true
				});
				
				$('#fFechaCierre').datepicker({
				    autoclose: true,
				    format: "dd/mm/yyyy",
				    todayBtn: true,
				    language: "es",
				    multidate: false,
				    todayHighlight: true
				});

				  $('#fChkFecha').on('click', function() {
					  if($( "#fChkFecha" ).is(':checked')){
						  $("#fFechaDesde").removeAttr("disabled");	
						  $("#fFechaHasta").removeAttr("disabled");	
					  } else {
						  $("#fFechaDesde").attr("disabled", true);
						  $("#fFechaDesde").val("");
						  $("#fFechaHasta").attr("disabled", true);
						  $("#fFechaHasta").val("");
					  }
					});
				  
				  $('#fChkHora').on('click', function() {
					  if($( "#fChkHora" ).is(':checked')){
						  $("#fHoraDesde").removeAttr("disabled");	
						  $("#fHoraHasta").removeAttr("disabled");	
					  } else {
						  $("#fHoraDesde").attr("disabled", true);
						  $("#fHoraDesde").val("");
						  $("#fHoraHasta").attr("disabled", true);
						  $("#fHoraHasta").val("");
					  }
					});
				  
				  $('#fChkSolicitante').on('click', function() {
					  if($( "#fChkSolicitante" ).is(':checked')){
						  $("#fSolicitante").removeAttr("disabled");	
					  } else {
						  $("#fSolicitante").attr("disabled", true);
						  $("#fSolicitante").val("");
					  }
					});
				  
				  $('#fChkCentroCosto').on('click', function() {
					  if($( "#fChkCentroCosto" ).is(':checked')){
						  $("#fCentroCosto").removeAttr("disabled");	
					  } else {
						  $("#fCentroCosto").attr("disabled", true);
						  $("#fCentroCosto").val("");
					  }
					});
				  
				  $('#fChkPasajero').on('click', function() {
					  if($( "#fChkPasajero" ).is(':checked')){
						  $("#fPasajero").removeAttr("disabled");	
					  } else {
						  $("#fPasajero").attr("disabled", true);
						  $("#fPasajero").val("");
					  }
					});
				  
				  $('#fChkFechaCierre').on('click', function() {
					  if($( "#fChkFechaCierre" ).is(':checked')){
						  $("#fFechaCierre").removeAttr("disabled");	
					  } else {
						  $("#fFechaCierre").attr("disabled", true);
						  $("#fFechaCierre").val("");
					  }
					});
				  
				  $('#fChkFechaPago').on('click', function() {
					  if($( "#fChkFechaPago" ).is(':checked')){
						  $("#fFechaPago").removeAttr("disabled");	
					  } else {
						  $("#fFechaPago").attr("disabled", true);
						  $("#fFechaPago").val("");
					  }
					});
				  
				  
				
				var selectB = 'BTodos';
				
				$( "#BTipoServicio" ).click(function() {
					selectB = 'BTipoServicio';
					$("#botonBuscar").html('Por tipo de servicio <span class="fa fa-search icon-on-right bigger-110"></span>');
				});
				
				$( "#BTipoVehiculo" ).click(function() {
					selectB = 'BTipoVehiculo';
					$("#botonBuscar").html('Por tipo de veh&iacute;culo <span class="fa fa-search icon-on-right bigger-110"></span>');
				});
				
				$( "#BTodos" ).click(function() {
					selectB = 'BTodos';
					$("#botonBuscar").html('Todos <span class="fa fa-search icon-on-right bigger-110"></span>');
				});
				
				$( "#BCodConductor" ).click(function() {
					selectB = 'BConductor';
					$("#botonBuscar").html('Por c&oacute;digo de conductor <span class="fa fa-search icon-on-right bigger-110"></span>');
				});
				
				$( "#BCodVehiculo" ).click(function() {
					selectB = 'BVehiculo';
					$("#botonBuscar").html('Por c&oacute;digo de veh&iacute;culo <span class="fa fa-search icon-on-right bigger-110"></span>');
				});
				
				$( "#BNumero" ).click(function() {
					selectB = 'BNumero';
					$("#botonBuscar").html('Por n&uacute;mero de reserva <span class="fa fa-search icon-on-right bigger-110"></span>');
				});
				
				oTable= $('#tabla-servicios').dataTable( {
					"aoColumns": [	
					{ "bSortable": false },
			      	{ "sType": "date-uk" },
			     	 null,
			     	 null,
			     	 null,
			     	 null,
			     	 null,
			     	 null,
			     	 null,
			     	 null,
			     	 null,
			     	 null,
			     	 null,
			     	 null,
			     	 null,
			     	 null,
			     	{ "sType": "date-uk" },
			     	{ "sType": "date-uk" },
			     	{"bVisible": false},
			     	{"bVisible": false}
				],
				"aaSorting": [[1,'asc']],
				"oLanguage": {
			          "sEmptyTable":     "No se encontraron servicios recientes"
			      }
				} );
				
				$( "#botonLimpiar" ).click(function() {
					oTable.fnFilter('',1);
					oTable.fnFilter('',2);
					oTable.fnFilter('',3);
					oTable.fnFilter('',4);
					oTable.fnFilter('',5);
					oTable.fnFilter('',6);
					oTable.fnFilter('',7);
					oTable.fnFilter('',8);
					oTable.fnFilter('',9);
					oTable.fnFilter('',10);
					oTable.fnFilter('',11);
					oTable.fnFilter('',12);
					oTable.fnFilter('',13);
					oTable.fnFilter('',14);
					oTable.fnFilter('',15);
					oTable.fnFilter('',16);
					oTable.fnFilter('',17);
					oTable.fnFilter('',18);
					oTable.fnFilter('',19);
					oTable.fnFilter('');
					$("#inputBuscar").val('');					
				});
				
				$("#inputBuscar").keyup(function(){
					if (selectB == 'BTodos')
					{
						oTable.fnFilter( this.value );
					}
					else if (selectB == 'BTipoServicio')
					{
						oTable.fnFilter( this.value, 6);
					}
					else if (selectB == 'BTipoVehiculo')
					{
						oTable.fnFilter( this.value, 7);
					}
					else if (selectB == 'BConductor')
					{
						oTable.fnFilter( this.value, 18);
					}
					else if (selectB == 'BVehiculo')
					{
						oTable.fnFilter( this.value, 19);
					}
					else if (selectB == 'BNumero')
					{
						oTable.fnFilter( this.value, 13);
					}
					else
					{
						oTable.fnFilter( this.value );
					}
				});
				
				$( "#btnEvaluarOrden" ).click(function() {
					 var ordenes = $('input[name="chkOrdenes"]:checked').map(function () {
					  				return this.value;
					 				}).get();
					 if(ordenes.length > 0 && ordenes.length < 2){
						 window.location = "/taxis/evaluarServicio?numeroOrden=" + ordenes;
					 } else {
						 alert("Debe seleccionar una orden de servicio");
					 }					 
			  	  });
				
				$( "#btnDetalleOrden" ).click(function() {
					 var ordenes = $('input[name="chkOrdenes"]:checked').map(function () {
					  				return this.value;
					 				}).get();
					 if(ordenes.length > 0 && ordenes.length < 2){
						 window.location = "/taxis/detalleServicio?numeroOrden=" + ordenes;
					 } else {
						 alert("Debe seleccionar una orden de servicio");
					 }					 
			  	  });
				
				$( "#btnEvaluarOrden" ).click(function() {
					 var ordenes = $('input[name="chkOrdenes"]:checked').map(function () {
					  				return this.value;
					 				}).get();
					 if(ordenes.length > 0 && ordenes.length < 2){
						 window.location = "/taxis/evaluarServicio?numeroOrden=" + ordenes;
					 } else {
						 alert("Debe seleccionar una orden de servicio");
					 }					 
			  	  });
				
				$( "#btnImprimirHistorial" ).click(function() {
// 					window.open('/taxis/downloadHistorial?type=pdf','_blank');
					$('#tipoDownload').val('pdf');
					$("#dowloadHistorial").submit();		
			  	  });
				
				$( "#btnExportarHistorialExcel" ).click(function() {					
// 					window.open('/taxis/downloadHistorial?type=xls');
					$('#tipoDownload').val('xls');
					$("#dowloadHistorial").submit();
			  	  });		
				
			})
			// ]]>
		</script>
	</body>
</html>